<template>
  <div class="home">
    <div class="header">
      <div class="bili" @click="toMine" v-if="token !== ''">
        <img src="../images/bilibili.png" alt="">
      </div>
      <div class="login" @click="toUser" v-else>
        登录
      </div>
      
      <van-search 
       shape="round"
       placeholder="请输入搜索关键词"
       v-model="value"
       @search="onSearch"
        />
        <div class="msg" v-if="token == ''">
          <van-icon name="chat-o" color="#aaa" size="30px" @click="toUser"/>
        </div>
         <div class="msg" v-else>
          <van-icon name="chat-o" badge="9" size="25px"/>
        </div>
    </div>
    <div class="menu">
      <van-tabs v-model:active="active">
        <van-tab title="推荐"><Home></Home></van-tab>
        <van-tab title="追番"><animation></animation></van-tab>
        <van-tab title="排行榜"><rankingList></rankingList></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Home from "../components/index.vue"
import animation from "../components/animation.vue";
import rankingList from "../components/rankingList.vue"
import { useRouter } from "vue-router";
import { ref } from "vue";
export default {
  components:{
    Home,
    rankingList,
    animation
  },
  setup() {
    const value = ref('');
    const active = ref(0);
    const router = useRouter()
    const token = ref(localStorage.getItem('token') ? localStorage.getItem('token') : '')
    // console.log(token.value);
    const onSearch = (val) => {
      // console.log(val);
      router.push({path:'/searchRes', query:{ keyword: val } })
    }
    const toUser = () => {
      router.push({path:'/login'})
    }
    const toMine = () => {
      router.push({path:'/mine'})
    }
    return {
      onSearch,
      value,
      active,
      toUser,
      token,
      toMine
    }
  }

}
</script>

<style scoped>
.header{
  position: fixed;
  display: flex;
  justify-content: space-between;
  height: 50px;
  width: calc(100vw - 20px);
  padding-top: 8px;
  line-height: 40px;
  padding: 0 10px;
  z-index: 99;
  background-color: #fff;
}
.login{
  width: 35px;
  height: 35px;
  font-size: 14px;
  border: 1px solid #aaa;
  border-radius: 50%;
  text-align: center;
  color: #aaa;
  margin-top: 8px;
}
.bili img{
  margin-top: 8px;
  width: 35px;
  height: 35px;
}
.menu{
  padding-top: 50px;
}
.msg{
  margin-top: 8px;
}
</style>